<template>
  <div class="viewSalesDetails">
    <div class="viewSalesDetails-items">
      <lookUpText class="viewSalesDetails-items-himTitle" title="单头信息" />
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <!-- <a-col :span="8" v-for="(value, index) in headerData" :key="index">
          <a-row class="viewSalesDetails-items-popnpm">
            <a-col :span="6">
              <div class="viewSalesDetails-items-tuiton viewSalesDetails-items-topPnm">{{ value.label }}:</div>
            </a-col>
            <a-col :span="18">
              <div class="viewSalesDetails-items-tuiton">{{ value.value }}</div>
            </a-col>
          </a-row>
        </a-col> -->
        <a-col :span="8">
          <a-descriptions :data="dataOne" title="订单信息" :size="mini" :column="1" />
        </a-col>
        <a-col :span="8">
          <a-descriptions :data="dataTwo" title="客户信息" :size="mini" :column="1" />
        </a-col>
        <a-col :span="8">
          <a-descriptions :data="headerData" title="金融信息" :size="mini" :column="1" />
        </a-col>
      </a-row>
    </div>
    <div class="viewSalesDetails-uionoption">
      <a-row :gutter="[24, 24]">
        <template v-for="(value, index) in bottomData" :key="index">
          <a-col v-if="!arrayFinally(index)" :span="12">
            <div class="viewSalesDetails-uionoption-tuotion">
              <lookUpText class="viewSalesDetails-items-himTitle" :title="value[4].value + value[5].value" />
              <a-descriptions :align="{ label: 'right' }" :data="value" layout="inline-horizontal" />
            </div>
          </a-col>
          <a-col v-if="arrayFinally(index)" :span="24">
            <div class="viewSalesDetails-uionoption-tuotion">
              <lookUpText class="viewSalesDetails-items-himTitle" :title="value[4].value + value[5].value" />
              <a-descriptions :align="{ label: 'right' }" :data="value" layout="inline-horizontal" />
            </div>
          </a-col>
        </template>
      </a-row>
    </div>
    <div v-if="from == 'task'" class="viewSalesDetails-bottom">
      <a-space>
        <a-button class="viewSalesDetails-bottom-btn" @click="agree">同意</a-button>
        <a-button @click="disagree">不同意</a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './viewSalesDetails';
import lookUpText from '@com/lookUpText/lookUpText.vue';
export default {
  components: {
    lookUpText,
  },
  setup() {
    const { base, init, headerDataOption, arrayFinally, agree, disagree } = importConfig();
    init();
    return {
      ...toRefs(base),
      init,
      headerDataOption,
      arrayFinally,
      agree,
      disagree,
    };
  },
};
</script>

<style lang="less" scoped>
.viewSalesDetails {
  width: 100%;
  height: 100%;
  color: #333;
  font-size: 12px;
  &-items {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 5px;
    background: white;
    box-shadow: 1px 2px 3px rgb(183, 183, 183);
    margin-bottom: 15px;
    &-tuiton {
      text-align: left;
      padding: 10px;
    }
    &-topPnm {
      background: #525a60;
      color: rgb(230, 230, 230);
    }
    &-popnpm {
      border: 1px solid #ececec;
    }
    &-himTitle {
      margin-bottom: 10px;
    }
  }
  &-uionoption {
    &-tuotion {
      border-radius: 5px;
      background: white;
      box-shadow: 1px 2px 4px rgb(183, 183, 183);
      padding: 10px;
    }
  }

  &-bottom {
    margin-top: 10px;
    border-radius: 5px;
    background: white;
    box-shadow: 1px 2px 4px rgb(183, 183, 183);
    padding: 10px;

    &-btn {
      background-color: #409eff;
      color: white;
    }

    :deep(.arco-btn) {
      width: 100px;
    }
  }
}
</style>
